<!-- 许愿池 -->
{% extends "base.html" %}
{% block title %}许愿池{% endblock %}
{% block content %}
    {% load static %}
<div class="row">
    <div class="col-md-8" style="position: relative;margin-bottom: 100px">
        {% for wish in wishs %}
          <div class="col-md-6" style="padding-top: 20px">
              <div class="notification-list shadow-reset">
                <span class="alert-title contact-client-img">
                    <img id="avatarimg" src="{% static userinfo.profile.avatar.url %}" width="60" height="60" alt="">
                </span>
                <span class="notification-bt responsive-btn">
                    📣{{ wish.message }}
                </span>
              </div>
              <div style="float: right;color: white;text-shadow: -1px 0 black,
                                                    0 1px black,
                                                    1px 0 black,
                                                    0 -1px black;">
                  ——{{ wish.nickname }}{{ wish.mood }}地说
              </div>
          </div>
      {% endfor %}
    <div style="text-align: center;position:absolute;bottom:-80px;left: 43%">
        <nav>
            <ul class="pagination">
                {% if wishs.has_previous %}
                <li>
                    <a href="?page={{ wishs.previous_page_number }}">
                        <span>&laquo;</span>
                    </a>
                </li>
                {% else %}
                <li class="disabled">
                    <a>
                        <span>&laquo;</span>
                    </a>
                </li>
                {% endif %}
                {% for number in wishs.paginator.page_range %}
                    {% if wishs.number == number %}
                        <li class="active"><a href="?page={{ number }}">{{ number }}</a> </li>
                    {% else %}
                        <li><a href="?page={{ number }}">{{ number }}</a> </li>
                    {% endif %}
                {% endfor %}
                {% if wishs.has_next %}
                    <li>
                        <a href="?page={{ wishs.next_page_number }}">
                            <span>&raquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="disabled">
                        <a>
                            <span>&raquo;</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    </div>
    <div class="col-md-4">
        <div class="login-bg" style="margin:10px;border-radius:10px">
        <div class="row">
            <div class="col-lg-12">
                <div class="logo">
                    <span class="alert-title contact-client-img">
                        <img id="avatarimg" src="{% static userinfo.profile.avatar.url %}" width="80" height="80" alt="">
                    </span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="login-title">
                    <h1>写下您的美好祝愿吧~</h1>
                </div>
            </div>
        </div>
            <form name="my form" action="." method="POST">
            {% csrf_token %}
                <div class="row">
                    <div class="col-md-4">
                        现在的心情：
                    </div>
                    <div class="col-md-8">
                            {% for m in moods %}
                                <input type="radio" name="mood" value="{{ m.status }}" id="mood">{{ m.status }}
                            {% endfor %}
                    </div>
                </div><br>
                <div class="row">
                    <div class="col-md-4">许愿留言板：</div>
                    <div class="col-md-8">
                        <textarea name="wish_post" rows="5" cols="25" class="form-control"></textarea>
                    </div>
                </div><br>
                <div class="row" style="text-align: center">
                    <button class="btn btn-custon-rounded-three btn-success" type="submit">张贴</button>
                    <button class="btn btn-custon-rounded-three btn-danger" type="reset">清除重填</button>
                </div>
            </form>
        </div>
    </div>
</div>


{% endblock %}